/**
 * @file filter
 * @author liaoxuezhi@baidu.com
 */
/* eslint fecs-indent: [0, "space", 2, 2] */

import * as React from 'react';
import {
    PureComponent,
    PropTypes
} from 'react';
import { Enhance as FormItem } from '../form-item';
import {noop} from '../../util';
import {
    InputGroup,
    FormControl,
    Button,
    Overlay
} from 'react-bootstrap'
import * as cx from 'classnames';
import * as debounce from 'lodash/debounce';
import SimplePopOver from '../../../widgets/simple-popover/simple-popover';
import {findDOMNode} from 'react-dom';
import Picker from './picker-qq';


function value2object(value) {
    if (!value) {
        return {};
    }

    if (typeof value === 'string') {
        return {
            address: value
        }
    }

    return value;
}

@FormItem({
    type: 'map'
})
export default class MapPicker extends PureComponent {

    constructor(props) {
        super(props);

        this.close = this.close.bind(this);
        this.open = this.open.bind(this);
        this.getOffset = this.getOffset.bind(this);
        this.handleChange = this.handleChange.bind(this);
        this.handleMounseDown = this.handleMounseDown.bind(this);

        this.state = {
            open: false
        };
    }

    open() {
        
        this.setState({
            open: true
        });
    }

    handleMounseDown(e) {
        e.preventDefault();
        e.stopPropagation();
        // e.target.blur();
        this.open();
    }

    close() {
        this.setState({
            open: false
        });
    }

    getOffset(box) {
        const dom = findDOMNode(this).getBoundingClientRect();
        let x =  (dom.width - box.width) / 2;

        return {
          x,
          y: 10
        }
    }

    handleChange(value) {
        // console.log(value);
        this.props.setValue(value);
    }

    render() {
        let {
            disabled,
            className,
            style,
            width,
            height
        } = this.props;

        style = style || {};
        width && (style.width = width);
        height && (style.height = height);

        const obj = value2object(this.props.value);
        const open = this.state.open;

        return (
            <div className={cx('map-picker', className)} style={style}>
                <InputGroup>
                    <FormControl
                        disabled={disabled}
                        type="text"
                        value={obj.address || ''}
                        className="text-date"
                        onChange={noop}
                        onClick={window.innerWidth < 800 ? undefined : this.open}
                        onMouseDown={window.innerWidth < 800 ? this.handleMounseDown : undefined}
                    />
                    <InputGroup.Button>
                        <Button
                            disabled={disabled}
                            onClick={this.open}
                        >
                            <i className="glyphicon glyphicon-pushpin" />
                        </Button>
                    </InputGroup.Button>
                </InputGroup>

                {open ? (
                    <Overlay
                        placement="bottom"
                        target={() => findDOMNode(this)}
                        onHide={this.close}
                        container={() => findDOMNode(this)}
                        rootClose
                        show
                    >
                        <SimplePopOver className="map__picker__popover" offset={this.getOffset} style={window.innerWidth < 800 ? {width: window.innerWidth, height: window.innerHeight} : undefined}>
                            <Picker value={obj} onChange={this.handleChange} onRequestClose={this.close} />
                        </SimplePopOver>
                    </Overlay>
                ) : null}
            </div>
        );
    }
}
